<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>用户列表</title>
    <%@ include file="inc/css.jsp" %>
</head>

<body>
<div id="posts" class="wrapper">

    <%@ include file="inc/nav.jsp" %>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">用户列表</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading" style="height: 70px;">
                        <form class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" id="nickName" maxlength="20" placeholder="昵称"/>
                            </div>
                            <div class="form-group">
                                <select class="form-control" id="typeList" name="type" style="width: 150px;">
                                    <option value="">全部</option>
                                    <option value="0">手机注册</option>
                                    <option value="1">微信登录</option>
                                    <option value="2">微博登录</option>
                                    <option value="3">QQ登录</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control input-append date form_datetime" style="width: 180px;" readonly id="startTime" name="startTime" maxlength="20" placeholder="开始时间"/>
                            </div>

                            <div class="form-group">
                                <input type="text" class="form-control input-append date form_datetime" style="width: 180px;" readonly id="endTime" name="endTime" maxlength="20" placeholder="结束时间"/>
                            </div>

                            <button type="button" id="c_search" class="btn btn-primary btn-sm">搜索</button>
                        </form>
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">

                        <div class="table-responsive">

                            <table class="table table-striped table-bordered table-hover" id="dataTables">
                                <colgroup>
                                    <col class="gradeA odd"/>
                                    <col class="gradeA even"/>
                                    <col class="gradeA odd"/>
                                    <col class="gradeA even"/>
                                    <col class="gradeA odd"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>昵称</th>
                                    <th>账号类别</th>
                                    <th>注册时间</th>
                                    <th>绑定手机</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <!-- /.panel-body -->

                </div>
                <!-- /.panel -->
            </div>
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->

<!-- Modal -->
<div class="modal fade" id="disabledModal" tabindex="-1" role="dialog" aria-labelledby="pwdModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="userId"/>
                <input type="hidden" id="sealStatus"/>
                <span id="disabledSpan" style="display: none">确定解除该用户的禁用状态？</span>
                <textarea id="content" style="display: none;resize: none" class="form-control" maxlength="200" style="resize: none" placeholder="请填写禁用原因" cols="40" rows="8"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="_userList.fn.changeStatus()" class="btn btn-primary">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- Modal end -->

<%@ include file="inc/footer.jsp" %>
</body>

<script type="text/javascript">
    var _userList = {
        v: {
            id: "_userList",
            list: [],
            dTable: null
        },
        fn: {
            init: function () {
                $('.form_datetime').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    format: 'yyyy-mm-dd hh:ii:ss'
                });

                _userList.fn.dataTableInit();

                // 查询
                $("#c_search").click(function () {
                    _userList.v.dTable.ajax.reload();
                });
            },
            dataTableInit: function () {
                _userList.v.dTable = $leoman.dataTable($('#dataTables'), {
                    "processing": true,
                    "serverSide": true,
                    "searching": false,
                    "ordering": false,
                    "ajax": {
                        "url": "backend/user/list",
                        "type": "POST"
                    },
                    "columns": [
                        {"data": "nickName"},
                        {
                            "data": null,
                            render: function (data) {
                                var showName = "";
                                switch (Number(data.type)) {
                                    case 0:
                                        showName = '手机注册';
                                        break;
                                    case 1:
                                        showName = '微信登录';
                                        break;
                                    case 2:
                                        showName = '微博登录';
                                        break;
                                    case 3:
                                        showName = 'QQ登录';
                                        break;
                                }
                                return showName;
                            }
                        },
                        {
                            "data": "createTime",
                            render: function (data) {
                                return formatJsonDateTime(data, 'yyyy-MM-dd hh:mm:ss');
                            }
                        },
                        {"data": "mobile"},
                        {"data": ""}
                    ],
                    "columnDefs": [
                        {
                            "data": null,
                            "defaultContent": "<a title='查看详情' class='btn btn-primary btn-circle edit'>" +
                            "<i class='fa fa-eye'></i>" +
                            "</a>" +
                            "&nbsp;&nbsp;" +
                            "<button type='button' title='启用' class='btn btn-success btn-circle changeStatus'>" +
                            "<i class='fa fa-recycle'></i>" +
                            "</button>",
                            "targets": -1
                        }
                    ],
                    "createdRow": function (row, data, index) {
                        _userList.v.list.push(data);
                    },
                    rowCallback: function (row, data) {
                        if (data.sealStatus == 0) {
                            $('td', row).last().find(".changeStatus").addClass("btn-danger");
                            $('td', row).last().find(".changeStatus").attr("title", "封禁");
                        } else {
                            $('td', row).last().find(".changeStatus").addClass("btn-success");
                            $('td', row).last().find(".changeStatus").attr("title", "解禁");
                        }

                        $('td', row).last().find(".edit").attr("href", 'backend/user/show?userId=' + data.id);

                        $('td', row).last().find(".changeStatus").click(function () {

                            console.log(data.sealStatus);
                            // 启用 or 禁用
                            if (data.sealStatus == '0') {
                                $('#sealStatus').val(1);
                                $('#content').css('display', '');
                                $('#disabledSpan').css('display', 'none');
                            } else {
                                $('#sealStatus').val(0);
                                $('#content').css('display', 'none');
                                $('#disabledSpan').css('display', '');
                            }
                            $('#userId').val(data.id);
                            $('#disabledModal').modal("show");
                        });
                    },
                    "fnServerParams": function (aoData) {
                        aoData.nickName = $('#nickName').val();
                        aoData.type = $('#typeList option:selected').val();
                        aoData.startTime = $('#startTime').val();
                        aoData.endTime = $('#endTime').val();
                    },
                    "fnDrawCallback": function (row) {
                        $leoman.uiform();
                    }
                });
            },
            changeStatus: function () {
                var flag = true;
                var sealStatus = $('#sealStatus').val();
                var content = $('#content').val();

                if (sealStatus == '1') {
                    if (null == content || content == '') {
                        $leoman.notify("请填写禁用原因", "error");
                        flag = false;
                        return;
                    }
                }

                if (flag) {
                    $leoman.ajax("backend/user/changeStatus", {
                        "userId": $('#userId').val(),
                        "status": sealStatus,
                        "content": content
                    }, function (result) {
                        $('#disabledModal').modal("hide");
                        if (result == 1) {
                            $leoman.notify("操作成功", "success");
                            _userList.v.dTable.ajax.reload(null, false);
                        } else {
                            $leoman.notify("操作失败", "error");
                        }
                    });
                }
            }
        }
    }

    $(document).ready(function () {
        _userList.fn.init();
    });

</script>

</html>